<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">主题乐园</el-breadcrumb-item>
      <el-breadcrumb-item>梦想大道</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card :body-style="{ padding: '0px' }">
      <div style="width: 700px">
        <el-carousel height="371px" @change="handleCarousel">
          <el-carousel-item v-for="(item, index) in carousel_1" :key="index">
            <img :src="item.imgUrl" height="371px" width="700px" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="content">
        <h3>{{ content_1.h3 }}</h3>
        <div>
          <span>{{ content_1.span }}</span>
        </div>
        <p>{{ content_1.p }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      carousel_1: [
        {
          imgUrl: require("@/assets/images/DreamAvenue-1-1.png"),
        },
        {
          imgUrl: require("@/assets/images/DreamAvenue-1-2.png"),
        },
        {
          imgUrl: require("@/assets/images/DreamAvenue-1-3.png"),
        },
      ],
      content_1: {
        h3: "梦想大道",
        strong: "",
        span: "项目特点： 宏大、奇妙 适合人群： 所有游客  欢乐指数： ★★★★★",
        p: "高大的穹顶下,灯光绚烂铺撒在宽阔的舞台上,请您尽情观赏杂技与歌舞掀起的一场场魔幻的表演,体味历史与文化编织出的一个个奇妙的故事……",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 走马灯切换时触发
    handleCarousel(newIndex, oldIndex) {
      console.log(newIndex, oldIndex);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

.el-card {
  margin: 30px auto;
  width: 700px;
  border-radius: 0 0 10px 10px;
}

.content {
  width: 700px;
  background-color: #f7b324;
  padding: 20px;
  min-height: 316px;
  box-sizing: border-box;

  h3 {
    width: max-content;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background-color: #d29004;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #df9f18;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-bottom: 25px;
  }

  > p {
    line-height: 24px;
    padding-left: 5px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
